<template>
	<div class="login_wrapper" v-loading="loading">
		<img class="bg" :src="loginBackground" v-if="!!loginBackground" />
		<el-card class="login_body">
			<template slot="header">
				<img :src="logoUrl" v-if="!!logoUrl" />
				<h2>{{ siteInfo?.name }}</h2>
			</template>
			<el-form ref="loginForm" :rules="formRules" :model="loginForm">
				<el-form-item prop="account">
					<el-input
						auto-complete="new-password"
						prefix-icon="el-icon-sw-user"
						placeholder="请输入您的登录账号"
						v-model="loginForm.account"
						@keyup.enter.native="handleSubmitLogin"
					></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input
						prefix-icon="el-icon-sw-pass"
						show-password
						placeholder="请输入您的登录密码"
						v-model="loginForm.password"
						@keyup.enter.native="handleSubmitLogin"
					></el-input>
				</el-form-item>
				<el-form-item prop="imageCode" v-if="!!verifyCodeImg">
					<div class="login_verify_code">
						<el-input
							type="text"
							maxlength="4"
							placeholder="请输入验证码"
							v-model="loginForm.imageCode"
							@input="verifyCodeFormat"
							@keyup.enter.native="handleSubmitLogin"
						></el-input>
						<img :src="verifyCodeImg" @click="getVerifyCode" />
					</div>
				</el-form-item>
				<el-form-item>
					<div class="login_button_box">
						<el-button class="login" type="primary" @click="handleSubmitLogin" :loading="btnLoading">登录</el-button>
						<!-- <el-button class="tohome" type="text" @click="handleToHome">网站首页</el-button> -->
					</div>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
import rsa from '@/utils/rsa';
import { login } from '@/api/login';
import { mapGetters, mapActions } from 'vuex';
import { generateVerifyCode, loginAddUserInfo } from '@/api/global';
export default {
	data() {
		return {
			loading: false,
			logoUrl: '',
			siteName: '',
			verifyCodeImg: '',
			loginBackground: '',
			loginForm: { account: '', password: '' /* imageCode: '' */ },
			formRules: {
				account: [{ required: true, message: '请输入用户账号', trigger: 'blur' }],
				password: [{ required: true, message: '请输入用户密码', trigger: 'blur' }],
				imageCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
			},
			btnLoading: false
		};
	},
	computed: {
		...mapGetters(['siteInfo'])
	},
	mounted() {
		this.initializeLoginPage();
	},
	methods: {
		...mapActions(['getFileUrl', 'getPermissionMenu', 'getSiteConfig']),
		//初始化登录页面
		async initializeLoginPage() {
			this.loading = true;
			await this.getFileUrl(this.siteInfo?.field8).then(res => {
				this.logoUrl = window.staticPath + res;
			})
			await this.getFileUrl(this.siteInfo?.field1).then(res => {
				this.loginBackground = window.staticPath + res;
			})
			this.loading = false;
		},

		//提交登录
		handleSubmitLogin() {
			this.$refs['loginForm'].validate((vail) => {
				if (!vail) return false;
				this.btnLoading = true;
				this.loginRequest(this.loginForm)
					.then(async (data) => {
						await this.getSiteConfig();
						await this.getPermissionMenu();
						this.$store.commit('SET_USER_INFO', data);
						this.$message.success('登录成功');
						this.$router.replace('/admin');
					})
					.catch(() => {
						this.getVerifyCode();
					});
			});
		},

		//登录请求
		loginRequest(data) {
			return new Promise(async (resolve, reject) => {
				let params = {
					...this.$deepClone(data),
					password: {
						type: 1,
						value: rsa.rsaPublicData(data.password)
					}
				};
				let result = await login(params).then((res) => res);
				let datas = result.data;
				this.btnLoading = false;
				if (datas.code === 0) {
					loginAddUserInfo();
					this.$store.commit('SET_TOKEN', result.headers['authorization']);
					resolve(datas.data[0]);
				} else {
					reject();
				}
			});
		},

		//获取验证码
		async getVerifyCode() {
			this.$set(this.loginForm, 'imageCode', '');
			this.verifyCodeImg = await generateVerifyCode(this.loginForm.account).then((res) => res.data);
		},

		//大写转化
		verifyCodeFormat(value) {
			this.loginForm.imageCode = value.toUpperCase().replace(/[^A-Z0-9]/g, '');
		},

		//去首页
		handleToHome() {
			this.$router.push('/front');
		}
	}
};
</script>

<style lang="scss" scoped>
.login_wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	position: relative;

	img.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		object-fit: cover;
	}
}

.login_body ::v-deep {
	position: relative;
	width: 450px;
	z-index: 2;
	border-radius: 8px;
	backdrop-filter: blur(15px);
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);

	.el-card__header {
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: none;
		padding: 40px 0 20px;

		img {
			width: 48px;
			height: 48px;
			object-fit: cover;
			border-radius: 50%;
			margin-right: 20px;
		}

		h2 {
			color: #fff;
			font-size: 28px;
			font-weight: normal;
		}
	}

	.el-card__body {
		padding: 20px 40px 10px;

		.el-form-item {
			margin-bottom: 30px;
		}

		.el-input__inner {
			height: 48px;
			font-size: 16px;
			padding: 10px 15px;
		}

		.el-input__prefix {
			font-size: 18px;
			padding: 4px;
			height: 40px;
		}

		.el-input__suffix {
			font-size: 18px;
			padding: 4px;
			height: 40px;
		}

		.el-input--prefix .el-input__inner {
			padding-left: 40px;
		}
	}
}

.login_verify_code {
	display: flex;

	img {
		width: 132px;
		height: 48px;
		object-fit: contain;
		flex-shrink: 0;
		margin-left: 10px;
		border-radius: 4px;
		background-color: rgba(255, 255, 255, 0.4);
	}
}

.login_button_box {
	display: flex;
	height: 48px;

	button.login {
		flex: 1;
		font-size: 18px;
		border-color: #e18121;
		background-color: #e18121;

		&:hover {
			border-color: #ffae5c;
			background-color: #ffae5c;
		}
	}

	button.tohome {
		color: #fff;
		margin-left: 30px;
		text-align: right;
	}
}
</style>
